<template>
  <div class="merchant" v-if="Object.keys(info).length">
    <!-- 商户头部信息开始 -->
    <div class="merchant-header">
      <!-- 商户头像开始 -->
      <img :src="info.seller.shopIcon" alt="" class="merchant-icon">
      <!-- 商户头像结束 -->
      <!-- 商户的名称与图标开始 -->
      <div class="merchant-icon-right">
        <div class="merchant-name">{{info.seller.shopName}}</div>
        <img :src="info.seller.creditLevelIcon" alt="" class="tag-Icon">
      </div>
      <!-- 商户的名称与图标结束 -->
    </div>
    <!-- 商户头部信息结束 -->
    <!-- 商户的评分开始 -->
    <div class="evaluates-wrapper">
      <div class="evaluates"
        v-for="(item,index) of info.seller.evaluates"
        :key="index">
        <span class="title">{{item.title}}</span>
        <span class="score">{{item.score}}</span>
      </div>
    </div>
    <!-- 商户的评分结束 -->
  </div>
</template>
<script>
export default {
  name: 'merchant',
  props: {
    info: {}
  }
}
</script>
<style lang="stylus" scoped>
.merchant
  padding-bottom 10px
  .merchant-header
    display flex
    align-items center
    margin-bottom 10px
    .merchant-icon
      width 55px
      height 55px
      margin 10px
    .merchant-icon-right
      .merchant-name
        font-size 20px
        margin-bottom 5px
      .tag-Icon
        height 20px
  .evaluates-wrapper
    display flex
    justify-content space-around
    margin-left 60px
</style>
